<!DOCTYPE html>
<html ng-app="vis">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Linked Data Aggregator</title>
    <script src="js/d3.min.js"></script>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/angular.min.js"></script>
    <script src="js/underscore-min.js"></script>
	<script src="js/angular-underscore.js"></script>
	<script src="js/vis.js"></script>
	<script src="js/modules.js"></script>
  <style>
  
  html,
      body { 
      	height: 100%;
      	overflow:hidden;
      	  }

      #wrap {
        min-height: 98%;
        height: auto !important;
        height: 100%;
      }
      
      .container {
		width:98%;
		position:absolute;              
		min-height:98% !important; /* browser fill */
		height:auto;
	  }
	  
  	div.arrow-down {
	width:0px; 
	height:0px; 
	border-top: 0px;
	border-left:5px solid transparent;
	border-right:5px solid transparent;
	border-top:5px solid #2f2f2f;
	font-size:0px;
	line-height:0px;
	float:right;
	}

div.arrow-up {
	width:0px; 
	height:0px;
	border-top: 0px;
	border-left:5px solid transparent;  /* left arrow slant */
	border-right:5px solid transparent; /* right arrow slant */
	border-bottom:5px solid #2f2f2f; /* bottom, add background color here */
	font-size:0px;
	line-height:0px;
	float:right;
}

div.menu {
	margin: 0; padding: 0;
}

	.details {
	  color:black;
	  font-size: 10px;
	  font-weight: bold;
	  background-color:rgba(255,255,255,1);
	  padding: 10px;
	  border-radius: 8px;
	  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	  position: absolute;
	  font-family: sans-serif;
	  visibility: hidden;
	  width: 300px;
	}
	
</style>
  </head>
  <body ng-controller="visCtrl">
<div id="wrapper">
	<div class="container">
 <div ng-class="{'arrow-up':show,'arrow-down':!show}" ng-click="show = !show"></div>
  <div ng-show="show" class="menu">
  <p><input style="width: 300px;" ng-model="endpoint" ng-cloak></input>
  <span ng-show="!querying && validEndpoint">
	<select ng-model="selectedGraph" ng-options="graph as graph for graph in graphs"></select>
	<span ng-show="propsFound">
    	<select  style="width:200px;" ng-model="selectedProp" ng-options="pro as pro.label || pro.prefixed for pro in props"></select>
    	<span ng-show="selectedProp">
    	<input style="width: 50px;" ng-model="filter" ng-cloak></input>	
	 	<button ng-click="query()">Query</button>
	 	</span>
	 </span>
  </span>
  </p>
  </div>
    <!-- Here's where our visualization will go -->
    <div id="tooltip" class="details"></div>
    <gh-visualization  val="classes" loading="querying"></gh-visualization>
    </div>
</div>
  </body>
</html>
